const pinyinMap = {
    "ni": ["你", "呢", "拟", "泥", "逆", "腻"],
    "hao": ["好", "号", "毫", "耗", "郝", "豪"],
    "ma": ["吗", "马", "嘛", "妈", "骂", "码"],
    "wo": ["我", "握", "窝", "卧", "喔", "沃"],
    "hen": ["很", "恨", "狠", "痕", "佷", "哏", "噷"],
    "ha": ["哈", "蛤", "铪", "奤", "𡄟", "𨉣", "𨉣"],
    "ya": ["呀","牙","压","亚","鸭","芽","雅","押"],
    "shi": ["是", "时","事","使","市","十","诗","饰"],
    "yi": ["一","以","已","亦","易"],
    "ge": ["个","各","歌","隔","哥","格"],
    "pacman": ["吃豆人"]
};

const inputBox = document.getElementById("input-box");
const suggestions = document.getElementById("suggestions");

let currentSuggestions = [];
let selectedIndex = -1;

inputBox.addEventListener("input", function() {
    const words = inputBox.value.toLowerCase().split(" ");
    const lastWord = words[words.length - 1];
    suggestions.innerHTML = "";
    currentSuggestions = [];
    selectedIndex = -1;
    
    if (pinyinMap[lastWord]) {
        suggestions.style.display = "block";
        suggestions.style.left = inputBox.offsetLeft + "px";
        suggestions.style.top = (inputBox.offsetTop + inputBox.offsetHeight) + "px";
        
        pinyinMap[lastWord].forEach((char, index) => {
            const div = document.createElement("div");
            div.textContent = `${index + 1}. ${char}`;
            div.classList.add("suggestion");
            div.dataset.index = index;
            div.onclick = function() {
                words[words.length - 1] = char + " ";
                inputBox.value = words.join(" ");
                suggestions.style.display = "none";
                inputBox.focus();
            };
            suggestions.appendChild(div);
            currentSuggestions.push(char);
        });
    } else {
        suggestions.style.display = "none";
    }
});

inputBox.addEventListener("keydown", function(event) {
    if (event.key >= "1" && event.key <= "9") {
        const index = parseInt(event.key) - 1;
        if (currentSuggestions[index]) {
            const words = inputBox.value.split(" ");
            words[words.length - 1] = currentSuggestions[index] + " ";
            inputBox.value = words.join(" ");
            suggestions.style.display = "none";
            event.preventDefault();
        }
    } else if (event.key === "Tab" && currentSuggestions.length > 0) {
        event.preventDefault();
        selectedIndex = 0;
        highlightSuggestion();
    } else if (event.key === "ArrowDown" && currentSuggestions.length > 0) {
        event.preventDefault();
        selectedIndex = (selectedIndex + 1) % currentSuggestions.length;
        highlightSuggestion();
    } else if (event.key === "ArrowUp" && currentSuggestions.length > 0) {
        event.preventDefault();
        selectedIndex = (selectedIndex - 1 + currentSuggestions.length) % currentSuggestions.length;
        highlightSuggestion();
    } else if (event.key === "Enter") {
        event.preventDefault();
        if (selectedIndex !== -1) {
            const words = inputBox.value.split(" ");
            words[words.length - 1] = currentSuggestions[selectedIndex] + " ";
            inputBox.value = words.join(" ");
            suggestions.style.display = "none";
            selectedIndex = -1;
        }
        copyToClipboard(inputBox.value); // 复制输入框内容到剪贴板
    }
});

function highlightSuggestion() {
    const suggestionDivs = document.querySelectorAll(".suggestion");
    suggestionDivs.forEach(div => div.classList.remove("selected"));
    if (selectedIndex !== -1) {
        suggestionDivs[selectedIndex].classList.add("selected");
    }
}

function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(() => {
        console.log("文本已复制到剪贴板:", text);
    }).catch(err => {
        console.error("复制失败:", err);
    });
}

document.addEventListener("click", function(event) {
    if (!inputBox.contains(event.target) && !suggestions.contains(event.target)) {
        suggestions.style.display = "none";
        selectedIndex = -1;
    }
});
